<template>
  <div class="charge_item_set">
    <!--搜索栏-->
    <div class="searchBox">
      <el-input
        placeholder="请输入项目名进行搜索"
        style="width: 220px;">
      </el-input>
      <el-button type="primary"  @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
    </div>
    <!--新增项目按钮-->
    <el-row type="flex" class="table_btn">
      <el-col :span="24" class="btnTypeSet">
        <el-button type="danger"
                   icon="el-icon-plus"
                   @click="goPage('/charge_management/add_charge_item')">新增项目</el-button>
      </el-col>
    </el-row>
    <!--表格-->
    <el-table
      size="mini"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      @row-click="handleRowHandle"
      align="center"
      style="width: 100%;text-align: center;cursor: pointer;">
      <el-table-column
        label="项目名称"
        align="center"
        width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.itemName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目类型"
        align="center"
        width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目起始时间"
        align="center"
        width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.beginDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目结束时间"
        align="center"
        width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.endDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="goPage('/charge_management/amend_charge_item')">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteRow(scope.$index, tableData)">删除</el-button>
          <!--@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="footerBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        tableData: [
          {
            itemName: '收费项目1',
            typeName: '项目类型1',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目2',
            typeName: '项目类型2',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目3',
            typeName: '项目类型3',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目4',
            typeName: '项目类型4',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目5',
            typeName: '项目类型5',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目6',
            typeName: '项目类型6',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目7',
            typeName: '项目类型7',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目8',
            typeName: '项目类型8',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目9',
            typeName: '项目类型9',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目10',
            typeName: '项目类型10',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目11',
            typeName: '项目类型11',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
          {
            itemName: '收费项目12',
            typeName: '项目类型12',
            beginDate: '2017-11-30',
            endDate: '2017-11-30'
          },
        ]
      }
    },
    methods: {
      deleteRow: function(index, rows) {
        var that = this;
        that.$confirm('确认删除此角色吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          rows.splice(index, 1);
          that.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      goPage : function (url) {
          this.$router.push({path : url});
      },
      searchFun: function () {

      },
      handleRowHandle:function (row,event,column) {
//        console.log(row);
//        console.log(event);
        console.log(column.label);
        if(column.label==='操作'){
            return
        } else {

        this.$router.push(
          {
            path : '/charge_management/charge_item_set_info',
            query: {row:row}
          }
        );
        }
      }
    }
  }
</script>

<style>
  .charge_item_set .searchBox{
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    margin-bottom: 10px;
    background: #fff;
  }
  .charge_item_set .table_btn{
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .charge_item_set .btnTypeSet{
    text-align: right;
  }
  .charge_item_set .footerBox{
    width: 100%;
    height: 50px;
    text-align: right;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
  }
</style>
